<!--  -->
<template>
  <div>
    <div class="search">
      <el-button
        type="primary"
        size="mini"
        @click="addClick"
        style="margin-left: 16px"
        >添加角色</el-button
      >
    </div>
    <el-table :data="tableData" size="mini" style="width: 99%">
      <el-table-column label="角色编号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.roleId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色名称" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.roleName }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.roleName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="warning"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      :title="isAdd ? '添加角色' : '修改角色'"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="drawerClose"
    >
      <div style="padding: 0 10px">
        <el-form
          size="mini"
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="roleName">
            <el-input
              type="text"
              v-model="ruleForm.roleName"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">{{
              isAdd ? "添加" : "修改"
            }}</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    //验证角色名称
    var validateRoleName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入角色名称"));
      } else {
        callback();
      }
    };
    return {
      tableData: [],
      drawer: false,
      isAdd: false,
      //表单数据
      ruleForm: {
        roleName: "",
      },
      //表单验证数据
      rules: {
        roleName: [{ validator: validateRoleName, trigger: "blur" }],
      },
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    //获取表格数据方法
    async getTableData() {
      let res = await this.$get("/Role/List");
      this.tableData = res;
      // console.log(res);
    },
    //编辑表格数据
    async handleEdit(index, row) {
      let roleId = row.roleId;
      let res = await this.$get("/Role/GetOne", { roleId });
      this.ruleForm = res;
      //打开抽屉
      this.isAdd = false;
      this.drawer = true;
    },
    //删除方法
    async handleDelete(index, row) {
      await this.$con_f("是否确定删除？");
      let roleId = row.roleId;
      //删除角色对应信息
      let { success, message } = await this.$post("/Role/Delete", { roleId });
      if (success) {
        this.$msg_s(message);
        //刷新表格
        this.getTableData();
      } else {
        this.$msg_e(message);
      }
    },
    //打开抽屉
    addClick() {
      this.drawer = true;
    },
    //关闭抽屉
    drawerClose(done) {
      // this.ruleForm.roleName = "";
      this.resetForm('ruleForm')
      this.isAdd = true
      done();
    },
    //表单的提交方法
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          //执行添加功能
          if (this.isAdd) {
            let { success, message } = await this.$post(
              "/Role/Add",
              this.ruleForm
            );
            if (success) {
              this.$msg_s(message);
              this.getTableData();
            } else {
              this.$msg_e(message);
            }
          }
        } else {
          //执行修改功能
          let { success, message } = await this.$post(
            "/Role/Update",
            this.ruleForm
          );
          if (success) {
            this.$msg_s(message);
            this.getTableData();
          } else {
            this.$msg_e(message);
          }
        }
      });
    },
    //表单重置方法
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.search {
  padding: 8px;
}
</style>